<script lang="ts" setup>

// 组件
import SiderBar from './page/SiderBar/index.vue'
import CardBoxHeaderLeftIcon from './page/CardBoxHeader/LeftIcon/index.vue'
import CardBoxHeaderRightaContent from './page/CardBoxHeader/RightaContent/index.vue'
import CardBody from "./page/CardBody/index.vue";
import CardRight from './page/CardChat/index.vue'


</script>
<template>
  <div class="bg-gray-100 flex h-screen items-center justify-center w-screen box-border ">
    <div
        class="card h-85% w-4/5 bg-white rounded-2xl shadow-md  hover:shadow-xl transition-all  p-4 ease-in-out delay-50 flex ">

      <!--      左侧导航栏-->
      <SiderBar></SiderBar>


      <div class="card-body w-2/3 h-full ml-3">
        <div class=" h-20 flex w-full"><!--  border border-black  -->
          <!--          左边图标-->
          <CardBoxHeaderLeftIcon></CardBoxHeaderLeftIcon>
          <!--            右侧-->
          <CardBoxHeaderRightaContent></CardBoxHeaderRightaContent>
        </div>

        <div style="height: 77%;">
          <!--          视频-->
          <CardBody></CardBody>
        </div>
      </div>

      <CardRight></CardRight>

    </div>
  </div>
</template>

<style scoped>

</style>